<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>嗨害嗨！</title>

    <!-- Vue+ElementUI -->
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

    <!-- 引入axios框架文件 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <link rel="stylesheet" href="css/myCss.css">
</head>

<body id="my-body">
<div id="app">

    <el-container class="my-container">

        <!--aside模板-->
        <el-aside class="my-aside test1"
                  :width="isCollapse?aside_width_1:aside_width_2">

            <el-menu class="el-menu-vertical-demo"
                     background-color="#545C64"
                     text-color="#fff"
                     active-text-color="#FFD04B"
                     unique-opened="false"
                     :collapse="isCollapse"
                     :width="isCollapse?aside_width_1:aside_width_2">

                <!--一级菜单-->
                <el-submenu index="1">
                    <!--一级菜单模板区域-->
                    <template slot="title">
                        <!--图标-->
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>
                    <!--二级菜单-->
                    <el-submenu index="1-1">
                        <template slot="title">选项1.1</template>
                        <!--三级菜单-->
                        <el-menu-item index="1-1-1">选项1.1.1</el-menu-item>
                    </el-submenu>
                </el-submenu>

            </el-menu>

        </el-aside>

        <el-container>

            <el-header class="test1">
                <el-button @click="toggleCollapse" class="el-icon-location">
                    嗨害嗨！
                </el-button>

            </el-header>

            <el-main class="test1">

            </el-main>

        </el-container>
    </el-container>

</div>
</body>

<script>


    const getWindowInfo = () => {
        const windowInfo = {
            width: window.innerWidth,
            hight: window.innerHeight
        }
        console.log(windowInfo);
    };
    const debounce = (fn, delay) => {
        let timer;
        return function() {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn();
            }, delay);

            if (window.innerWidth < 1000){
                v.aside_width_1 = "0px";
                v.aside_width_2 = "200px";
            }else {
                v.aside_width_1 = "64px";
                v.aside_width_2 = "200px";
            }
        }
    };
    const cancalDebounce = debounce(getWindowInfo, 100);
    window.addEventListener('resize', cancalDebounce);


    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                isCollapse: true,
                aside_width_1: window.innerWidth<1000?'0px':'64px',
                aside_width_2: '200px',
            }
        },
        methods: {
            toggleCollapse(){
                v.isCollapse = !v.isCollapse;
            },
        }

    })
</script>
</html>